.container {
  display: grid;
  display: inline-grid;

  /*行列的定义*/
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;

  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;

  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);

  grid-template-columns: repeat(2, 100px 20px 80px);

  grid-template-columns: 1fr 1fr;
  grid-template-columns: 150px 1fr 2fr;

  /*容器宽度不指定时,自动填充*/
  grid-template-columns: repeat(auto-fill, 100px);

  grid-template-columns: 1fr 1fr minmax(100px, 1fr);

  grid-template-columns: 100px auto 100px;

  /*网格线*/
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

  /*间隔*/
  row-gap: 10px;
  column-gap: 10px;
  gap: 10px 10px;

  /*区域*/
  grid-template-areas:
    "a b c"
    "d e f"
    "g h i";
  grid-template-areas:
    "a a a"
    "b b b"
    "c c c";
  grid-template-areas:
    "a . c"
    "d . f"
    "g . i";

  /*排向*/
  grid-auto-flow: column;
  grid-auto-flow: column dense;

  /*items*/
  justify-items: center;
  align-items: center;
  place-items: center center;

  /*content*/
  justify-content: center;
  align-content: center;
  place-content: center center;

  /*在指定位置外设置宽高*/
  grid-auto-columns: 50px;
  grid-auto-rows: 50px;
}
.items {
  /*通过网格线定义自己的位置*/
  grid-column-start: 1;
  grid-column-end: 3;
  grid-column: 1/3;
  grid-column-start: span 2; /*跨越 2个网格*/
  grid-column-end: span 2; /*跟上面的一样*/
  grid-column: 1 / span 2;

  /*确定区域*/
  grid-area: e;
  /*<row-start> / <column-start> / <row-end> / <column-end>;*/
  grid-area: 1 / 1 / 3 / 3;

  justify-self: center;
  align-self: center;
  place-self: center center;
}
